<template>
  <a-comment style="width: 60%;">
    <template #avatar>
      <a-avatar :src="abc" alt="Han Solo" />
    </template>
    <template #content>
      <a-form-item>
        <a-textarea v-model:value="value" :rows="4" />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
          确认
        </a-button>
      </a-form-item>
    </template>
  </a-comment>
  <div style="height: 40px">
    评论列表
  </div>
  <pl-icon v-for="(i,index) in data" :key="index"
           :chai="i.chai"
           :film="i.film"
           :text="i.text"
           :time="i.time"
           :zhang="i.zhang"
           :user="i.user"
           :email="i.email"
           :url="i.url" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

import axios from 'axios'
import PlIcon from '@/components/ico/pn/plIcon.vue'

import dayjs from 'dayjs'

const props = defineProps<{
  film: string

}>()
const user = ref()
const email = ref()
const abc = ref('')

const data = ref([])

axios.get('/api/user/getName', {
  headers: {
    Authorization: localStorage.getItem('token')
  }
}).then((res) => {
  abc.value = res.data.img
  user.value = res.data.user
  email.value = res.data.email
})


const submitting = ref<boolean>(false)
const value = ref<string>('')
const handleSubmit = () => {
  if (!value.value) {
    return
  }

  submitting.value = true
  const formattedTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  data.value.push({
    'user': user.value,
    'film': props.film,
    'text': value.value,
    'url': user.value,
    'zhang': 0,
    'chai': 0,
    'email': email.value,
    'url': abc.value,
    'time': formattedTime
  })
  setTimeout(() => {

    const data1 = new FormData()
    data1.append('data', value.value)
    data1.append('file', props.film)
    axios.post('/api/pn/setpn', data1, {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    })
    submitting.value = false
    value.value = ''
  }, 500)
}
</script>


<style>

.ant-input {
  height: 300px;
  background-color: rgba(255, 255, 255, 0);
  color: #f4f4f4;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 2px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(159, 159, 159, 0.3);
  background-color: #818181;
}
</style>
